<template>
  <ul class="help-content-list">
    <li class="hct-item" v-for="(item, index) in list" :key="index">
      <div class="hct-item-card"></div>
      <a class="hct-item-text" :href="'/articleDetail/'+item.article_id" target="_blank">
        {{ item.article_title }}
      </a>
    </li>
  </ul>
</template>

<script lang="ts">
import { defineComponent, ref, toRefs, onMounted } from "vue";
import { getArticleListApi } from "/@/api/article";
export default defineComponent({
  name: "helpListTpl",
  components: {},
  props: {
    itemId: {
      type: String,
      default: "",
    },
  },
  setup(props) {
    const { itemId } = toRefs(props);
    const list = ref([]);
    const getArticleList = async () => {
      let data = await getArticleListApi({
        itemId: itemId.value,
        current: 1,
        size: 10000,
      });
      list.value = data.records;
    };


    onMounted(getArticleList);
    return {
      list
    };
  },
});
</script>

<style lang="less" scoped>
.help-content-list {
  display: flex;
  flex-wrap: wrap;
  padding: 10px 0 60px;
  margin: 0;

  .hct-item {
    display: flex;
    width: 384px;
    padding: 13px 0;
    margin: 0;

    &:not(:nth-child(3n)) {
      margin-right: 24px;
    }

    .hct-item-card {
      width: 30px;
      height: 30px;
      background: url("/@/assets/img/commonTip.png") no-repeat center;
      border-radius: 50%;
    }

    .hct-item-text {
      padding: 5px 10px;
      line-height: 20px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      cursor: pointer;

      &:hover {
        color: #0078ff;
      }
    }
  }
}
</style>